import React, {Component} from 'react';
import {StyleSheet, Text, View, Image, ScrollView, Alert} from 'react-native';
import {Button, WhiteSpace, WingBlank, Flex, Provider, Toast, Modal} from '@ant-design/react-native';
import {
    setParkingOrderPayMode,
    getParkingOrderInfo,
    getParkingDataInfo,
    getBankInfoByItemID,
    getBankInfoByCompanyID,
    getBankInfoByBuildingID,
} from '~/api/parking';
import Album from '~/pages/home/album/Album';
import {UploadParkingOrderFile} from '~/api/owner';
import Spinner from 'react-native-loading-spinner-overlay';
import {connect} from 'react-redux';
import Parkpublics from '~/components/process/parkpublics';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
    };
};
class PayMoney extends Component {
    static navigationOptions = {
        title: '全款付款',
    };
    constructor(props) {
        //调用基类的所有的初始化方法
        super(props);
        // 设置当前组件的属性
        this.state = {
            orderid: this.props.navigation.getParam('orderid'),
            parkid: this.props.navigation.getParam('parkid'),
            // projectId: this.props.navigation.getParam('projectId'),
            parkinginfo: [],
            files: [],
            parkplanlist: [],
            baseurl: '',
            picList: [],
            spinner: false,
            orderInfo: [],
            a: 1,
        };
        getParkingOrderInfo(this.state.orderid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    baseurl: r.data.HttpBaseUrl,
                    picList: r.data.picList,
                    orderInfo: r.data,
                });
                if (r.data.ParkingPlanItemID > 0) {
                    this.getbankbyitemid(r.data.ParkingPlanItemID);
                } else {
                    this.getbankbycompanyid(r.data.CompanyBuildingID);
                }
            } else {
                Alert.alert(r.msg);
            }
        });
        getParkingDataInfo(this.state.parkid).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkinginfo: r.data,
                });
            } else {
                Toast.info(r.msg, 1);
            }
        });
        // 图片上传
        this.onUpload = (files) => {
            this.setState({
                spinner: true,
            });
            UploadParkingOrderFile(this.state.orderid, files)
                .then((r) => {
                    if (r.code === 0) {
                        this.setState({
                            spinner: false,
                        });
                        Modal.alert('提示', '您的凭证已上传成功，开发商会在一个工作日内完成审核，届时将以短信通知', [{text: '确定'}]);
                    } else {
                        this.setState({
                            spinner: false,
                            a: 0,
                        });
                        Alert.alert('上传失败，原因：' + r.msg);
                    }
                })
                .catch((error) => {
                    this.setState({
                        spinner: false,
                        a: 0,
                    });
                });
        };
    }
    getbankbyitemid(id) {
        getBankInfoByItemID(id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkplanlist: r.data,
                });
            } else {
                Toast.info(r.msg);
            }
        });
    }
    getbankbycompanyid(id) {
        getBankInfoByBuildingID(id).then((r) => {
            if (r.code === 0) {
                this.setState({
                    parkplanlist: r.data,
                });
            } else {
                Toast.info(r.msg);
            }
        });
    }
    render() {
        const onpress = () => {
            this.props.navigation.replace('MyOrder');
            // setParkingOrderPayMode({
            //     id: this.state.orderid,
            //     state: 1,
            // }).then((r) => {
            //     console.log(r);
            //     if (r.code === 0) {
            //         this.props.navigation.replace('MyOrder');
            //     } else {
            //         Toast.info(r.msg, 1);
            //     }
            // });
        };
        return (
            <View style={{width: '100%', height: '100%'}}>
                <ScrollView style={{flex: 1}}>
                    <Parkpublics parkinginfo={this.state.parkinginfo} />
                    <WhiteSpace size="xs" />
                    <View style={{backgroundColor: '#ffffff', padding: 20}}>
                        <Flex justify={'between'}>
                            <Text style={{fontSize: 15, color: '#333333', fontWeight: '500'}}>车位总价：</Text>
                            <Text style={{fontSize: 15, color: '#EB4F46'}}>￥{this.state.parkinginfo.PriceSell}</Text>
                        </Flex>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#333333', fontWeight: '500'}}>已付订金：</Text>
                            <Text style={{fontSize: 15, color: '#EB4F46'}}>-￥{this.state.parkinginfo.DepositPirce}</Text>
                        </Flex>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#333333', fontWeight: '500'}}>待付：</Text>
                            <Text style={{fontSize: 15, color: '#EB4F46'}}>
                                ￥{this.state.parkinginfo.PriceSell - this.state.parkinginfo.DepositPirce}
                            </Text>
                        </Flex>
                    </View>
                    <WhiteSpace size="md" />
                    <View style={{backgroundColor: '#ffffff', padding: 20}}>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#656565', fontWeight: '500'}}>联系人：</Text>
                            <Text style={{fontSize: 15, color: '#656565'}}>{this.state.parkplanlist.Contacter}</Text>
                        </Flex>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#656565', fontWeight: '500'}}>联系电话：</Text>
                            <Text style={{fontSize: 15, color: '#656565'}}>{this.state.parkplanlist.Telephone}</Text>
                        </Flex>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#656565', fontWeight: '500'}}>收款方户名：</Text>
                            <Text style={{fontSize: 15, color: '#656565'}}>{this.state.parkplanlist.BankPayee}</Text>
                        </Flex>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#656565', fontWeight: '500'}}>收款方账号：</Text>
                            <Text style={{fontSize: 15, color: '#656565'}}>{this.state.parkplanlist.BankAccounts}</Text>
                        </Flex>
                        <Flex justify={'between'} style={{paddingTop: 10}}>
                            <Text style={{fontSize: 15, color: '#656565', fontWeight: '500'}}>开户行：</Text>
                            <Text style={{fontSize: 15, color: '#656565'}}>{this.state.parkplanlist.BankBranch}</Text>
                        </Flex>
                    </View>
                    <WhiteSpace size="md" />
                    <View
                        style={{
                            padding: 10,
                            flexDirection: 'column',
                            backgroundColor: '#ffffff',
                        }}>
                        <Flex>
                            <Text style={{color: '#E94F4F'}}>*</Text>
                            <Text>上传凭证</Text>
                        </Flex>
                        <Spinner visible={this.state.spinner} textContent={'上传中...'} />
                        {this.props.userinfo.identity == 8 && this.state.orderInfo.IsFullPay != 1 && (
                            <Flex style={{width: '100%', marginTop: 10}} wrap="wrap">
                                <Album
                                    onSelect={(files) => {
                                        this.onUpload(files);
                                    }}
                                    id={0}
                                    spinner={this.state.a === 0 ? 0 : 1}
                                />
                            </Flex>
                        )}
                    </View>
                    <WhiteSpace size="md" />
                    <Flex wrap="wrap" style={{backgroundColor: '#ffffff', padding: 10}}>
                        {this.state.picList != '' &&
                            this.state.picList.map((item) => {
                                return (
                                    <Image
                                        style={{width: 100, height: 100, marginRight: 10}}
                                        source={{uri: this.state.baseurl + '/' + item.FileName}}
                                    />
                                );
                            })}
                    </Flex>
                    <WhiteSpace size="xl" />
                </ScrollView>
                {this.props.userinfo.identity == 8 && this.state.orderInfo.IsFullPay != 1 && (
                    <Flex direction="column" justify="center">
                        <Button style={{width: '100%'}} type={'warning'} onPress={onpress}>
                            {this.state.picList != '' ? '保存' : '下一步'}
                        </Button>
                    </Flex>
                )}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        marginBottom: 20,
    },
    button1: {
        marginBottom: 20,
        backgroundColor: 'green',
    },
    images: {
        width: 100,
        height: 100,
        marginTop: 19,
    },
});
export default connect(mapGetter)(PayMoney);
